<template>
    <base-upload-file ref="upload" :action="uploadAction" :uploadProps="uploadProps" @downLoadExcel="downLoadExcel_" @confirm="success">
        <div slot="header" style="width: 100%">
            <el-form label-position="top" :inline="true">
                <el-form-item required>
                    <div style="display: flex">
                        <el-select v-model="uploadType" size="mini" :placeholder="$t('commonWord.placeSelectFileType')">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                        <p class="f12 color-info text-underline hover mgl-20" @click="$refs['upload'].downLoadExcel()">
                            {{ $t('commonWord.downloadSampleFile') }}
                        </p>
                    </div>
                    <template v-slot:label>
                        <span class="f14" style="font-weight: normal">导入模板类型:</span>
                    </template>
                </el-form-item>
            </el-form>
        </div>
        <template slot="other" />
    </base-upload-file>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator';
import baseUrl from '@/api/baseUrl';
import commonApiUrl from '@/api/common-api';
import { _downUrl } from '@/api/apiConfig';
import { Dictionary } from '@/typings';

@Component({
    name: 'goods-input',
    components: {
        baseUploadFile: () => import('@/components/base-upload-file/index.vue')
    }
})
export default class App extends Vue {
    // @Prop({ default: false }) disabled: boolean
    // @Prop() status: string
    // @Prop() formData: any
    @Prop({
        default: () => {
            return {};
        }
    })
    queryParam: Dictionary;
    uploadAction: string = baseUrl + commonApiUrl.uploadDetailExcel;
    importDisabled: boolean = false;
    // queryParam: any = {}
    options: any[] = [
        { label: '尺码竖排导入', value: 'vertical' },
        { label: '尺码横排导入', value: 'horizontal' },
        { label: '条形码导入', value: 'barcode' }
    ];
    // 导入模式选择
    uploadType: any = 'vertical';
    // 导入配置
    uploadProps = {};
    // 深度监听价格类型渠道
    // @Watch('formData', { deep: true })
    // onChange() {}

    @Watch('uploadType', { deep: true })
    uploadTypeOnChange(value) {
        this.uploadProps = {
            autoUpload: false,
            data: {
                moduleId: this.$route.meta.moduleId,
                type: value,
                queryParam: this.queryParam
            }
        };
    }
    // 下载模板文件
    async downLoadExcel_() {
        if (this.uploadType === 'barcode') {
            this.$message.warning('没有条形码导入模板,请选择其他类型的导入模板！');
        } else {
            try {
                await _downUrl({
                    url: commonApiUrl.getImportModel,
                    params: {
                        moduleId: this.$route.meta.moduleId,
                        type: this.uploadType
                    },
                    fileName: '样式模板文件.xlsx'
                });
            } catch (err) {
                console.log('err', err);
            }
        }
    }
    // 反馈结果
    success(res) {
        console.log('success', res);
        if (res.code === 0) {
            const record = res.data.recordList;
            record.forEach((item) => {
                item.goodsFields = {
                    goodsBuildDate: '',
                    goodsStyleName: ''
                };
                if (item.customFieldMap) {
                    for (const k in item.customFieldMap) {
                        item[k] = item.customFieldMap[k];
                    }
                }
                item.totalAmount = item.quantity * item.balancePrice || 0;
                // item.quantity = item.billSizeList.reduce((x, em) => {
                //   return (
                //     x +
                //     Object.keys(em).reduce((a, y) => {
                //       return a + Number(y.match(/^s\d+/) ? em[y] || 0 : 0)
                //     }, 0)
                //   )
                // }, 0)
            });

            this.$emit('importGoods', record);
        }
    }

    // get showInput() {
    //   return !['detail', 'cancel', ''].includes(this.status)
    // }
    ClickEvent() {
        // this.queryParam = typeof this.queryParam === 'string' ? this.queryParam : JSON.stringify(this.queryParam)
        console.log('queryParam', this.queryParam);
        this.uploadProps = {
            autoUpload: false,
            data: {
                moduleId: this.$route.meta.moduleId,
                type: this.uploadType,
                queryParam: JSON.stringify(this.queryParam)
            }
        };
        (this.$refs['upload'] as any).open();
    }
}
</script>

<style scoped lang="scss">
.file-import {
    display: inline-block;
}
</style>
